<template>
  <div id="province" style="height: 350%; width: 100%"></div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "provinceList",
  data() {
    return {
      dataList: [],
      dataValue: [],
      dataName: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      setInterval(() => {
        request.get("/cov/get_list").then((res) => {
          this.dataList = res;
          for (let i = 0; i < this.dataList.length; i++) {
            this.dataName[i] = this.dataList[i].name;
            this.dataValue[i] = this.dataList[i].value;
          }
          this.dataList = res;
          this.initList();
        });
      }, 3000);
    },
    initList() {
      const myChartList = echarts.init(document.getElementById("province"));
      const option = {
        title: {
          // text: '市区疫情情况'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.dataName,
          axisLabel: {
            //修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "确诊人数",
            type: "bar",
            data: this.dataValue,
          },
        ],
        axisLabel: {
          //修改坐标系字体颜色
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      };
      myChartList.setOption(option);
    },
  },
};
</script>

<style scoped>
</style>
